<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('社保查询')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
	<th:block th:include="include :: select2-css" />
</head>
<style >
	/* WebKit-based browsers (Chrome, Safari) */
	html, body {
		&::-webkit-scrollbar {
			display: none;
		}
	}
	.top{
		display: flex;
		background-color: #307CF6;
		width: 100%;
		height: 6rem;
		justify-content: center;
		align-items: center;
	}
	.tab-search{
		margin-top: -0.6rem;
		display: flex;
		width: 100%;
		height: 5rem;
		justify-content: center;
		align-items: center;

	}
	.tab-search span {
		flex: 1;
		text-align: center;
	}
	.content {
		background-size: 100% auto;
		background-image: url("/img/tab1.png");
		background-repeat: no-repeat;
	}
	.tab-pay{
		display: flex;
		width: 100%;
		height: 5rem;
		justify-content: center;
		align-items: center;
	}
	.tab-pay span {
		flex: 1;
		text-align: center;
	}
	.myBlue {
		color: #0d8ddb;
		text-decoration: underline;
		text-decoration-color: #0d8ddb;
		text-underline-offset: 5px;
	}
	.myBlack {
		color: #3d3d3d;
	}
	.div-list {
		margin-top: 1rem;
		position: relative;
		border-radius:  8px;
	}
	.div-list td {
		padding: 0.5rem;
		background: #fafafa;
	}
	#detailDiv td {
		padding: 0.5rem;
	}

	/* 强制模态框居中 */
	.modal {
		text-align: center;
		padding: 0!important;
	}

	.modal:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -4px;
	}

	.modal-dialog {
		display: inline-block;
		text-align: left;
		vertical-align: middle;
	}

	.parent {
		display: flex;
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
		height: 100px; /* 父元素高度 */
	}
</style>
<body>
	<div class="top">
		<span style="font-size: 1.5rem; color: white">社保查询</span >
	</div>
	<form>
		<div class="content">
			<div class="tab-search">
				<span onclick="changeSearchType(1)">身份证查询</span>
				<span onclick="changeSearchType(2)">地址查询</span>
			</div>

			<div id="idCard">
				<div class="row">
					<div class="col-xs-8 col-xs-offset-1">
						<input type="text" id="idNo" class="form-control" placeholder="请输入身份证号">
					</div>
					<div class="col-xs-2">
						<button type="button" id="idQuery"  class="btn btn-success" >查询</button>
					</div>
				</div>
				<div id="idCardContentDiv" class="container">
				</div>
			</div>

			<div id="address" style="display: none">
				<div class="row">
					<div class="col-xs-4 col-xs-offset-1">
						<select id="street" class="form-control" >
							<option value="">-街道-</option>
						</select>
					</div>
					<div class="col-xs-4">
						<select id="community" class="form-control">
							<option value="">-社区-</option>
						</select>
					</div>
					<div class="col-xs-2">
						<button type="button" id="addressQuery" class="btn btn-success">查询</button>
					</div>
				</div>
				<div class="tab-pay">
					<span id="tab-pay1" onclick="changePayType(1)">已缴纳</span>
					<span id="tab-pay2" onclick="changePayType(2)">未缴纳</span>
				</div>
				<div id="addressContentDiv" class="container">
				</div>
				<div id="addressLoadDiv" style="text-align: center">
					<br>
					<span style="color: #0d8ddb; text-align: center" onclick="loadNextPage()">加载更多</span>
				</div>
				<div id="addressOverDiv" style="text-align: center">
					<br>
					<span style="color: #c9c9c9; text-align: center">已加载全部</span>
				</div>
			</div>
		</div>

		<div class="modal" id="detailDiv" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content animated fadeIn">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title">详情</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%;">
							<tr>
								<td style="width: 40%; text-align: right;">姓名：</td>
								<td style="width: 60%; text-align: left;" id="detailName"></td>
							</tr>
							<tr>
								<td style="width: 40%; text-align: right;">身份证号：</td>
								<td style="width: 60%; text-align: left;" id="detailIdNo"></td>
							</tr>
							<tr>
								<td style="width: 40%; text-align: right;">性别：</td>
								<td style="width: 60%; text-align: left;" id="detailSex"></td>
							</tr>
							<tr>
								<td style="width: 40%; text-align: right;">年龄：</td>
								<td style="width: 60%; text-align: left;" id="detailAge"></td>
							</tr>
							<tr class="payedShow">
								<td style="width: 40%; text-align: right;">总金额：</td>
								<td style="width: 60%; text-align: left;" id="detailTotal"></td>
							</tr>
							<tr class="payedShow">
								<td style="width: 40%; text-align: right;">每月缴纳：</td>
								<td style="width: 60%; text-align: left;" id="detailMonth"></td>
							</tr>
							<tr class="payedShow">
								<td style="width: 40%; text-align: right;">缴纳时间：</td>
								<td style="width: 60%; text-align: left;" id="detailPayTime"></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</form>

	<th:block th:include="include :: footer" />
	<th:block th:include="include :: layout-latest-js" />
	<th:block th:include="include :: ztree-js" />
	<th:block th:include="include :: select2-js" />
	<script th:inline="javascript">

		var socialInfo;
		var socialInfoList;
		var street;
		var community;
		var isPay;
		var pageNum = 1;
		var pageSize = 2;

		// 顶级标签页切换
		function changeSearchType(searchTypeParam)  {
			if (searchTypeParam === 1){
				$(".content").css("background-image",'url("/img/tab1.png")')
				$("#idCard").show()
				$("#address").hide()
			} else if (searchTypeParam === 2) {
				$(".content").css("background-image",'url("/img/tab2.png")')
				$("#idCard").hide()
				$("#address").show()
			}
			changePayType(1);
		}

		// --- 身份证查询 start ---
		$('#idQuery').click(function() {
			var idNo = $("#idNo").val();
			if(idNo != ""){
				idCardSearchResult()
			}
		});

		function idCardSearchResult() {
			socialByIdNo($("#idNo").val());
			let name = socialInfo.name;
			let idNo = socialInfo.idNo;
			let sex = socialInfo.sex;
			let age = socialInfo.age;
			let total = socialInfo.total;
			let month = socialInfo.month;
			let oneData;
			if(name == null){
				oneData = `
				<div class="parent">
  					<span class="child">没有查询到相关结果</span>
				</div>
			`
			}else{
				oneData = `
				<div class="div-list">
					<table style="width: 100%;">
						<tr style="font-weight: bold;">
							<td style="width: 20%; text-align: left;padding-left: 10px !important;padding-top: 10px !important;">${name}</td>
							<td colspan="3" style="text-align: left;padding-top: 10px !important;">${idNo}</td>
						</tr>
						<tr>
							<td style="width: 20%; text-align: left;padding-left: 10px !important;">性别：</td>
							<td style="width: 25%; text-align: left;">${sex}</td>
							<td style="width: 25%; text-align: left;">年龄：</td>
							<td style="width: 30%; text-align: left;">${age}</td>
						</tr>
						<tr>
							<td style="width: 20%; text-align: left;padding-left: 10px !important;padding-bottom: 10px !important;">总金额：</td>
							<td style="width: 25%; text-align: left;padding-bottom: 10px !important;">${total}</td>
							<td style="width: 25%; text-align: left;padding-bottom: 10px !important;">每月缴纳：</td>
							<td style="width: 30%; text-align: left;padding-bottom: 10px !important;">${month}</td>
						</tr>
					</table>
					<span style="position: absolute; top: 0.5rem; right: 0.5rem; color: #0d8ddb;padding: 10px"
						onclick="openDetail(${idNo})">详情>></span>
				</div>
			`
			}
			$("#idCardContentDiv").empty()
			$("#idCardContentDiv").append(oneData)
		}

		function socialByIdNo(idNo) {
			$.ajax({
				type: "post",
				url: ctx + "social/socialByIdNo",
				async: false,
				data: {
					"idNo": idNo
				},
				success: function (data) {
					socialInfo = data;
				}
			})
		}
		// --- 身份证查询 end ---

		// --- 地址查询 start ---
		$('#street').val('');
		$('#street').select2({
			data:[[${streets}]],
			placeholder: '请选择街道',
			allowClear: true
		});
		$('#street').on('select2:select', function (e) {
			// 获取选中的数据
			var selectedData = e.params.data;
			street = selectedData.text
			$('#community').select2('destroy').empty();
			if (selectedData.id != null && selectedData.id !== ''){
				$.ajax({
					type: "post",
					url: ctx + "social/communityList",
					data: {
						"streetCode": selectedData.id,
					},
					success: function(data) {
						$('#community').select2({
							placeholder: '请选择社区',
							data: data
						});
						community='';
					}
				});
			} else {
				$('#community').select2({
					placeholder: '请选择社区',
					data: []
				});
				community='';
			}
		});
		$('#community').on('select2:select', function (e) {
			// 获取选中的数据
			var selectedData = e.params.data;
			community = selectedData.text;
		});

		function changePayType(payType)  {
			if (payType === 1){
				$("#tab-pay1").addClass('myBlue').removeClass('myBlack')
				$("#tab-pay2").addClass('myBlack').removeClass('myBlue')
				isPay = 1;
			} else if (payType === 2) {
				$("#tab-pay2").addClass('myBlue').removeClass('myBlack')
				$("#tab-pay1").addClass('myBlack').removeClass('myBlue')
				isPay = 0;
			}
			addressSearchResult()
		}

		$('#addressQuery').click(function() {
			addressSearchResult()
		});

		function addressSearchResult(loadNextPage) {
			if (loadNextPage == null) { // 如果是‘加载更多’则不清空原数据
				$("#addressContentDiv").empty()
				pageNum = 1
			}
			getSocialList()
			if(socialInfoList.total === 0){
				$("#addressContentDiv").empty()
				let oneData = `
				<div class="parent">
  					<span class="child">没有查询到相关结果</span>
				</div>
				`
				$("#addressContentDiv").append(oneData)
				$("#addressLoadDiv").hide()
				$("#addressOverDiv").hide()
			}else{
				for(let i in socialInfoList.rows){
					let one = socialInfoList.rows[i]
					let name = one.name;
					let idNo = one.idNo;
					let sex = one.sex;
					let age = one.age;
					let total = one.total;
					let month = one.month;
					let display = isPay === 0 ? "none" : "table-row";
					let oneData = `
						<div class="div-list">
							<table style="width: 100%;">
								<tr style="font-weight: bold;">
									<td style="width: 20%; text-align: left;padding-left: 10px !important;padding-top: 10px !important;">${name}</td>
									<td colspan="3" style="text-align: left;padding-top: 10px !important;">${idNo}</td>
								</tr>
								<tr>
									<td style="width: 20%; text-align: left;padding-left: 10px !important;">性别：</td>
									<td style="width: 25%; text-align: left;">${sex}</td>
									<td style="width: 25%; text-align: left;">年龄：</td>
									<td style="width: 30%; text-align: left;">${age}</td>
								</tr>
								<tr style="display:${display}; ">
									<td style="width: 20%; text-align: left;padding-left: 10px !important;padding-bottom: 10px !important;">总金额：</td>
									<td style="width: 25%; text-align: left;padding-bottom: 10px !important;">${total}</td>
									<td style="width: 25%; text-align: left;padding-bottom: 10px !important;">每月缴纳：</td>
									<td style="width: 30%; text-align: left;padding-bottom: 10px !important;">${month}</td>
								</tr>
							</table>
							<span style="position: absolute; top: 0.5rem; right: 0.5rem; color: #0d8ddb;padding: 10px"
								onclick="openDetail(${idNo})">详情>></span>
						</div>
					`
					$("#addressContentDiv").append(oneData)
				}
				if (pageNum * pageSize < socialInfoList.total){
					pageNum++
					$("#addressLoadDiv").show()
					$("#addressOverDiv").hide()
				} else {
					$("#addressLoadDiv").hide()
					$("#addressOverDiv").show()
				}
			}
		}

		function getSocialList(){
			$.ajax({
				type: "post",
				url: ctx + "social/getSocialList?pageNum="+pageNum+"&pageSize="+pageSize,
				data: {
					"street": street,
					"community": community,
					"isPay": isPay,

				},
				async: false,
				success: function(data) {
					socialInfoList = data;
					console.log(socialInfoList)
				}
			});
		}
		function loadNextPage(){
			addressSearchResult('loadNextPage')
		}
		// --- 地址查询end ---

		// 详情
		function openDetail(idNo){
			$('#detailDiv').modal('show')
			socialByIdNo(idNo)
			if(socialInfo.isPay === "1"){
				$(".payedShow").show()
			} else {
				$(".payedShow").hide()
			}
			$("#detailName").text(socialInfo.name)
			$("#detailIdNo").text(socialInfo.idNo)
			$("#detailSex").text(socialInfo.sex)
			$("#detailAge").text(socialInfo.age)
			$("#detailTotal").text(socialInfo.total)
			$("#detailMonth").text(socialInfo.month)
			$("#detailPayTime").text(socialInfo.payTime)
		}
		function closeDetail(){
			$('#detailDiv').modal('hide')
		}
	</script>
</body>
</html>